import React, { Component } from "react";

export default class TodoItem extends Component {
  handleDel = () => {
    this.props.del && this.props.del(this.props.id);
  };

  handleChange = (event) => {
    // console.log("TodoItem", event.target.checked);

    this.props.aa && this.props.aa(this.props.id, event.target.checked);
  };

  render() {
    const { id, text, done } = this.props;

    return (
      <div className="todo-item">
        <div className="todo-item__checkbox">
          <div className="todo-checkbox">
            <input
              type="checkbox"
              defaultChecked={done}
              onChange={this.handleChange}
            />
            <span></span>
          </div>
        </div>
        <div className="todo-item__text">{text}</div>
        <div className="todo-item__handle">
          <button className="todo-edit-button">编辑</button>
          <button className="todo-delete-button" onClick={this.handleDel}>
            删除
          </button>
        </div>
      </div>
    );
  }
}
